<template>
  <div>
    <el-container>
      <el-main>
        <div style="height: 50px;" align="right">
          <el-button type="primary" @click="addBook()">添加图书</el-button>
        </div>

        <el-table
            :data="tableData"
            border
            style="width: 100%">
          <el-table-column
              prop="id"
              label="序号"
              width="50">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column
              prop="bookId"
              label="编号"
              width="100">
            <template slot-scope="scope">
              {{scope.row.bookid}}
            </template>
          </el-table-column>
          <el-table-column
              prop="type"
              label="书名"
              width="120">
            <template slot-scope="scope">
              {{scope.row.bookname}}
            </template>
          </el-table-column>
            <el-table-column
                prop="type"
                label="类型"
                width="120">
              <template slot-scope="scope">
                {{scope.row.booktype}}
              </template>
          </el-table-column>
          <el-table-column
              prop="ebookAdd"
              label="电子书地址"
              >
            <template slot-scope="scope">
              {{scope.row.ebookaddress}}
            </template>
          </el-table-column>
          <el-table-column
              prop="isFree"
              label="是否免费"
              width="80">
            <template slot-scope="scope">
              {{scope.row.isfree!=0?'是':'否'}}
            </template>
          </el-table-column>
          <el-table-column
              prop="isEmpty"
              label="库存"
              width="80">
            <template slot-scope="scope">
              {{scope.row.isentity}}
            </template>
          </el-table-column>
          <el-table-column
              prop="Integral"
              label="积分"
              width="80">
            <template slot-scope="scope">
              {{scope.row.howintegral}}
            </template>
          </el-table-column>
          <!--      fixed="right" 该项用于把该操作放到最后-->
          <el-table-column
              label="操作"
              width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="deleteByid(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
<!--        <el-pagination
            background
            layout="prev, pager, next"
            page-size="3"
            :total="total"
            @current-change="page"
        ></el-pagination>-->
        <div class="block">
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="page"
              :current-page.sync="currentPage1"
              :page-size="20"
              layout="total, prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  components: { Pagination },
  methods: {
    addBook(){
      this.$router.push('addBook');
    },
    deleteByid(row){
      const _this = this
      axios.delete('http://localhost:8082/book-manager/deleteBookById?bookId='+row.bookid).then(function (resp){
        _this.$alert('《'+row.name+'》删除成功，按确定按钮跳转查询页面', '删除成功', {
          confirmButtonText: '确定',
          callback: action => {
            window.location.reload();
          }
        });
      })
    },
    handleClick(row) {
      this.$router.push({
        path:'alertBook',
        query:{
          id: row.bookid
        }
      })
    },
    page(pageSize){
      const _this = this;
      axios.get('http://localhost:8082/book-manager/selectAllBook?pageNum='+pageSize+'&pageSize=20').then(function (resp){
        console.log(resp.data);
        _this.tableData = resp.data.list;
        _this.total = resp.data.total;
      })
    },
  },
  created() {
    const _this = this;
    axios.get('http://localhost:8082/book-manager/selectAllBook?pageNum=1&pageSize=20').then(function (resp){
      console.log(resp.data);
      _this.tableData = resp.data.list;
      _this.total = resp.data.total;
    });
  },
  data() {
    return {
      tableData: null,
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      }

    }
  }
}
</script>
